<!DOCTYPE html>
<html>
	<head>
		<title>dojox.form.CheckedMultiSelect</title>
		<link rel="stylesheet" id="themeStyles" href="../../../dijit/themes/claro/claro.css">
		<link rel="stylesheet" href="../resources/CheckedMultiSelect.css">
		<style>
			@import url(../../../dojo/resources/dojo.css);
			@import url(../../../dijit/tests/css/dijitTests.css);
			
			.ark {
				text-decoration: underline;
			}
			td {
				vertical-align: top;
			}
		</style>
		<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: true, parseOnLoad: true">
		</script>
		<script src="../../../dijit/tests/_testCommon.js">
		</script>
		<script type="text/javascript">
			
			dojo.require("dojo.parser");
			dojo.require("dojox.form.CheckedMultiSelect");
			dojo.require("dijit.form.Button");
			dojo.require("dijit.form.Form");
			dojo.require("dojo.data.ItemFileWriteStore");
			
			var data = {
				identifier: "value",
				label: "label",
				items: [{
					value: "AL",
					label: "Alabama",
					selected: true
				}, {
					value: "AK",
					label: "Alaska"
				}, {
					value: "AZ",
					label: "Arizona",
					selected: true
				}, {
					value: "AR",
					label: "Arkansas"
				}, {
					value: "CA",
					label: "California"
				}, {
					value: "CO",
					label: "Colorado"
				}, {
					value: "CT",
					label: "Connecticut"
				}]
			};
			
			var readStore = new dojo.data.ItemFileReadStore({
				data: dojo.clone(data)
			});
			var writeStore = new dojo.data.ItemFileWriteStore({
				data: dojo.clone(data)
			});
			
			var checkOptions = 0;
			var radioOptions = 0;
			var addNum = 10;
			var testType;
			// Uncomment below line to run perf tests - note SLOW to run
			//testType = "perf";
			
		</script>
	</head>
	<body class="claro">
		<h1 class="testTitle">Test: dojox.form.CheckedMultiSelect</h1>
		<h2>Non-dojo select (for comparison)</h2>
		<select>
			<option value ="volvo">Volvo</option>
			<option value ="saab">Saab</option>
			<option value="opel">Opel</option>
			<option value="audi">Audi</option>
		</select>
		<form dojoType="dijit.form.Form" jsId="form">
			<hr><h2>Multi-select</h2>
			<table>
				<tr>
				<td>
					<select jsId="ms1" multiple="true" name="ms1" dojoType="dojox.form.CheckedMultiSelect" dropdown="false">
						<option value="TN">Tennessee</option>
						<option value="VA" selected="selected">Virginia</option>
						<option value="WA" selected="selected">Washington</option>
						<option value="FL">Florida</option>
						<option value="CA">California</option>
					</select>
				</td>
				<td>
					<button dojoType="dijit.form.Button">
						<script type="dojo/method" event="onClick">
							ms1.invertSelection(true);
							return false;
						</script>
						Invert Selection
					</button>
					<button dojoType="dijit.form.Button">
						<script type="dojo/method" event="onClick">
							ms1.set("disabled", !ms1.disabled);
							return false;
						</script>
						Toggle Disabled
					</button>
					<button dojoType="dijit.form.Button">
						<script type="dojo/method" event="onClick">
							console.log(ms1.get("displayedValue"));
							return false;
						</script>
						Get Displayed Value
					</button>
				</td>
				<tr>
					<td>
						<select jsId="ms2" multiple="true" name="ms2" dojoType="dojox.form.CheckedMultiSelect" dropdown="false">
							<option value="UT">Utah</option>
							<option value="TX" selected="selected">Texas</option>
							<option value="GA" selected="selected">Georgia</option>
							<option value="ID">Idaho</option>
							<option value="WY">Wyoming</option>
							<option value="OR">Oregon</option>
							<option value="PA">Pennsylvania</option>
						</select>
					</td>
					<td>
						<button dojoType="dijit.form.Button">
							<script type="dojo/method" event="onClick">
								ms2.set("readOnly", !ms2.readOnly);
								return false;
							</script>
							Toggle Read Only
						</button>
					</td>
				</tr>
				<tr>
					<td>
						<select jsId="ms3" multiple="true" maxHeight="125" name="ms3" dojoType="dojox.form.CheckedMultiSelect" dropdown="false">
						</select>
					</td>
					<td>
						<button dojoType="dijit.form.Button">
							<script type="dojo/method" event="onClick">
								checkOptions++;
								ms3.addOption({value: checkOptions + "", label: "Option " + (checkOptions)});
								return false;
							</script>
							Add Check Option
						</button>
						<button dojoType="dijit.form.Button">
							<script type="dojo/method" event="onClick">
								if(checkOptions > 0){
									checkOptions--;
									ms3.removeOption(checkOptions);
								}
								return false;
							</script>
							Remove Check Option
						</button>
					</td>
				</tr>
				<tr>
					<td>
						<select jsId="ms4" multiple="true" maxHeight="125" size="5" name="ms4" store="readStore" dojoType="dojox.form.CheckedMultiSelect" dropdown="false">
						</select>
					</td>
					<td>
						Read-Store-based
					</td>
				</tr>
			</table>
			<hr><h2>Validation</h2>
			<select jsId="rq1" multiple="true" required="true" name="rq1" store="readStore" dojoType="dojox.form.CheckedMultiSelect" invalidMessage="You need to select at least one" dropdown="false">
			</select>
			<button dojoType="dijit.form.Button">
				Validate
				<script type='dojo/method' event='onClick'>
					var isvalid = rq1.isValid();
					console.warn("isvalid?", isvalid, form, form.validate);
					try{
					rq1.validate();
					form.validate();
					}catch(e){
					console.log(e);
					}
					console.warn("validated");
				</script>
			</button>
			<hr><h2>Output values in console</h2>
			<button dojoType="dijit.form.Button">
				<script type="dojo/method" event="onClick">
					console.dir(form.get("value"));
					return false;
				</script>
				Get Values
			</button>
		</form>
	</body>
</html>
